<template>
    <!-- 新增标签按钮 -->
        <el-button type="primary" @click="addTagBtnClick">
            <el-icon class="mr-1">
                <Plus />
            </el-icon>
            新增标签</el-button>
    

    <!-- 添加标签 -->
    <FormDialog ref="formDialogRef" title="添加文章标签" destroyOnClose @submit="onSubmit">
        <el-form ref="formRef" :model="form">
            <el-form-item prop="name">
                <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" closable :disable-transitions="false"
                    @close="handleClose(tag)">
                    {{ tag }}
                </el-tag>
                <span class="w-20">
                    <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="ml-1 w-20" size="small"
                        @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
                    <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
                        + 新增标签
                    </el-button>
                </span>
            </el-form-item>
        </el-form>
    </FormDialog>
</template>

<script setup>
// 引入所需图标
import { addTag } from '@/api/admin/tag'
import FormDialog from '@/components/FormDialog.vue'
import { showMessage } from '@/composables/util'
import { reactive, ref, nextTick } from 'vue'
import { ElInput } from 'element-plus'

//新增标签的tag
const inputValue = ref('')
//已输入的标签数组
const dynamicTags = ref([])
// 标签输入框是否显示
const inputVisible = ref(false)
// 表单对象-名称
const form = reactive({
    tags: []
})
// 对话框是否显示
const formDialogRef = ref(null)

// 新增标签按钮点击事件
const addTagBtnClick = () => {
    formDialogRef.value.open()
}
// 表单引用
const formRef = ref(null)
//标签输入框的引用
const InputRef = ref('')

const onSubmit = () => {
    // 先验证 form 表单字段
    formRef.value.validate((valid) => {
        form.tags = dynamicTags.value
        // 显示提交按钮 loading
        formDialogRef.value.showBtnLoading()

        // 请求添加标签接口
        addTag(form).then((res) => {
            if (res.success == true) {
                showMessage('添加成功')
                // 将表单中标签名称置空
                form.tags = []
                dynamicTags.value = []
                // 隐藏对话框
                formDialogRef.value.close()
            } else {
                // 获取服务端返回的错误消息
                let message = res.message
                // 提示错误消息
                showMessage(message, 'error')
            }
        }).finally(() => formDialogRef.value.closeBtnLoading())// 隐藏提交按钮 loading
    })
}

//新增标签事件
const handleClose = (tag) => {
    console.log(handleClose)
    dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
    console.log('showInput')
    inputVisible.value = true
    nextTick(() => {
        InputRef.value.input.focus()
    })
}

const handleInputConfirm = () => {
    console.log('handleInputConfirm')
    if (inputValue.value) {
        dynamicTags.value.push(inputValue.value)
    }
    inputVisible.value = false
    inputValue.value = ''
}
</script>